﻿function FillData(){
    var xmlDoc = LoadXML("Data/staff.xml");

    var x=xmlDoc.getElementsByTagName("staff");
    if(x.length > 0){
        var acc = document.getElementById("accordion");
        for (i=0; i<x.length; i++){
            //tabhead
            var tabhead = document.createElement("div");
            tabhead.className = "tabhead";
            tabhead.setAttribute("role","tab");
            
            //avatar
            var avatar = document.createElement("img");
            avatar.src = x[i].getElementsByTagName("avatar")[0].childNodes[0].nodeValue; //avatar
            if(i%2==0){
            avatar.className = "floated_left";
            }else{
            avatar.className = "floated_right";
            }
            tabhead.appendChild(avatar);
            
            //wrapper of jobtitle and name
            var ph = document.createElement("p");
            if(i%2==0){
            ph.className = "floated_left";
            }else{
            ph.className = "floated_right";
            }
            
            //name
            var name = document.createElement("a");
            name.setAttribute("href","javascript:void(0)");                
            name.innerHTML = x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue; //name
            ph.appendChild(name);
            ph.appendChild(document.createElement("br"));
            
            //jobtitle
            var pos = document.createElement("span");
            pos.innerHTML = x[i].getElementsByTagName("position")[0].childNodes[0].nodeValue; //position
            ph.appendChild(pos);

            tabhead.appendChild(ph);
            
            //clear div
            var clr = document.createElement("div");
            clr.className = "clear";
            tabhead.appendChild(clr);
            
            //tabpanel
            var tabpanel = document.createElement("div");
            tabpanel.className = "tabpanel";
            tabpanel.setAttribute("role","tabpanel");

            //info
            var info = document.createElement("p");
            if(i%2==0){
            info.className = "floated_left";
            }else{
            info.className = "floated_right";
            }
            info.innerHTML = x[i].getElementsByTagName("info")[0].childNodes[0].nodeValue; //information
            tabpanel.appendChild(info);

            acc.appendChild(tabhead);
            acc.appendChild(tabpanel);
        }
    }
}